<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="../jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">

</head>
<body>
<pre>
    <h3>
        BootStrap中的轮播图大致分为以下几个部分：
            图片部分：用于展示内容的图片
            计数器:用于计算当前切换的图片索引
            控制器：控制图片的显示对象
        步骤：
        ①：定义一个容器class="carousel"样式
        ②：轮播图片的计数器,用于显示图片的播放顺序。我们通常使用li元素，并且
            用class="carousel-indicators"样式，图片的数量与li元素数量一致
        ③:设置轮播图片，轮播效果主要在于轮播图片，我们使用class="carousel-inner"样式
        类控制轮播区域，并将这个轮播区放到class="carousel"容器内
        ④:给图片添加文字。很多时候我们需要在图片底部添加一些文字和链接，作为图片的说明信息。
        我们可以使用class="carousel-caption"样式
        ⑤：控制器。有时候需要使用鼠标来控制图片的左右滚动，我们称之为控制器。在bootStrap中我们只
        需使用carousel配合样式left right来实现。left表示向左滚动，right表示向右滚动。
    </h3>
</pre>
<div class="container">

    <div class="carousel" style="width: 50%" id="carouselContainer" data-ride="carousel">
        <ol class="carousel-indicators" >
            <li class="active" data-target="#carouselContainer" data-slide-to="0">1</li>
            <li data-target="#carouselContainer" data-slide-to="1">2</li>
            <li data-target="#carouselContainer" data-slide-to="2">3</li>
            <li data-target="#carouselContainer" data-slide-to="3">4</li>
        </ol>

        <div class="carousel-inner" >
            <div class="item active">
                <a href="">
                    <img src="../image/1.jpg" />
                </a>
                <div class="carousel-caption">
                    <h3>C++PrimerPlus</h3>
                </div>
            </div>

            <div class="item">
                <a href="">

                    <img src="../image/1.jpg" />
                </a>
                <div class="carousel-caption">
                    <h3>JavaScript</h3>
                </div>
            </div>

            <div class="item">
                <a href="">

                    <img src="../image/1.jpg" />
                </a>
                <div class="carousel-caption">
                    <h3>代码整洁之道</h3>
                </div>
            </div>

            <div class="item">
                <a href="">

                    <img src="../image/1.jpg" />
                </a>
                <div class="carousel-caption">
                    <h3>SpringBoot</h3>
                </div>
            </div>
            <a href="#carouselContainer" class="left carousel-control" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a href="#carouselContainer" class="right carousel-control" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
//        $("#carouselContainer").carousel({
//            wrap:true
//        })
    })
</script>
</html>